<template>
  <scroll-view :class="'top__biggoods-page ' + BigGoodsPageClass" scroll-x="false" scroll-y="true"
    @scrolltolower="onReachscrollBottom">
    <!-- 列表模式 -->
    <block v-if="formData.listStyle === 2">
      <view v-for="(item, index) in goodsList" :key="index" class="spellpre__goods spellpre__goodsL"
        :style="'padding: ' + ( index === 0 ? ( '10px 0 ' + formData.goodsPadding + 'px 0') : (formData.goodsPadding + 'px 0') )">
        <view :class="'spellpre__goods--box ' + GoodsBoxClass" :data-id="item.id" @tap.stop="gotoDetail">
          <view class="spellpre__goodsL--content">
            <view class="spellpre__goodsL--icon">
              <view class="no__goods" v-if="!item.inventory">
                <text>已售罄</text>
                <text>Sold out</text>
              </view>
              <view class="ipic">
                <image :src="image.transformImage(item.img, '375')" mode="aspectFill" alt :lazy-load="true"></image>
                <!-- <image src="{{ item.img }}" mode="widthFix" alt=""></image> -->
              </view>
            </view>
            <view class="spellpre__goodsL--info">
              <view :class="'spellpre__goodsL--name ' + GoodsNameClass">{{ item.name }}</view>
              <view class="spellpre__goodsL--buy">
                <view class="spellpre__goodsL--prinum">
                  {{ '¥' + (item.actPrice !== '0.00' ? item.actPrice : item.price) }}
                </view>
                <view v-if="formData.cartButton === 3" class="spellpre__goods--cart spellpre__goods--cart1">
                  <image src="https://oss-tencent.bgniao.cn//gruul/20200710/810700b67e264a7b82bba347528b9eb0.png" alt>
                  </image>
                </view>
                <view v-if="formData.cartButton === 4" class="spellpre__goods--cart spellpre__goods--cart2">
                  <image src="https://oss-tencent.bgniao.cn//gruul/20200710/3de00f3d8099459c83771b1f4decb197.png" alt>
                  </image>
                </view>
                <view v-if="formData.cartButton === 1" class="spellpre__goods--cart spellpre__goods--cart3">
                  立即购买
                </view>
                <view v-if="formData.cartButton === 2" class="spellpre__goods--cart spellpre__goods--cart4">
                  立即购买
                </view>
                <view class="spellpre__goodsL--guaid">{{  '¥' + item.price }}</view>
              </view>
            </view>
          </view>
          <view class="spellpre__goods--footer spellpre__goodsL--footer" v-if="false">
            <view class="timebox">
              <view class="tip">{{ item.preheatStatus === 1 ? '距开始' : '距结束' }}</view>
              <view class="time_flex">
                <view>{{ endList[index].list[0][0] }}</view>
                <view>{{ endList[index].list[0][1] }}</view>
                :
                <view>{{ endList[index].list[1][0] }}</view>
                <view>{{ endList[index].list[1][1] }}</view>
                :
                <view>{{ endList[index].list[2][0] }}</view>
                <view>{{ endList[index].list[2][1] }}</view>
              </view>
            </view>
            <view class="time-info">已售{{ item.soldCount }}/还剩{{ item.inventory }}</view>
            <view class="user__icon">
              <view v-for="(attr, idx) in userAttrs[index]" :key="idx" :class="'icon_' + (idx + 1)">
                <image :src="attr" mode="aspectFit" v-if="attr"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
    <!-- 大图模式 -->
    <block v-if="formData.listStyle === 1">
      <view v-for="(item, index) in goodsList" :key="index" class="spellpre__goods spellpre__goodsB"
        :style="'padding: ' + ( index === 0 ? ( '10px 0 ' + formData.goodsPadding + 'px 0') : (formData.goodsPadding + 'px 0') )">
        <view :class="'spellpre__goods--box ' + GoodsBoxClass" :data-id="item.id" @tap.stop="gotoDetail">
          <view class="spellpre__goodsB--icon">
            <view class="no__goods" v-if="!item.inventory">
              <text>已售罄</text>
              <text>Sold out</text>
            </view>
            <image :src="image.transformImage(item.img, '375')" mode="aspectFill" alt :lazy-load="true"></image>
          </view>
          <view class="detail__box">
            <view :class="'spellpre__goodsB--name ' + GoodsNameClass">{{ item.name }}</view>
            <view class="spellpre__goodsB--buy">
              <view class="spellpre__goodsB--prinum">
                ¥{{ item.actPrice !== '0.00' ? item.actPrice : item.price }}
              </view>
              <view class="spellpre__goodsB--guaid">¥{{ item.price }}</view>
              <view v-if="formData.cartButton === 3" class="spellpre__goods--cart spellpre__goods--cart1">
                <image src="https://oss-tencent.bgniao.cn//gruul/20200710/810700b67e264a7b82bba347528b9eb0.png" alt>
                </image>
              </view>
              <view v-if="formData.cartButton === 4" class="spellpre__goods--cart spellpre__goods--cart2">
                <image src="https://oss-tencent.bgniao.cn//gruul/20200710/3de00f3d8099459c83771b1f4decb197.png" alt>
                </image>
              </view>
              <view v-if="formData.cartButton === 1" class="spellpre__goods--cart spellpre__goods--cart3">
                立即购买
              </view>
              <view v-if="formData.cartButton === 2" class="spellpre__goods--cart spellpre__goods--cart4">
                立即购买
              </view>
            </view>
            <view class="spellpre__goods--footer spellpre__goodsB--info" v-if="false">
              <view class="timebox">
                <view class="tip">{{ item.preheatStatus === 1 ? '距开始' : '距结束' }}</view>
                <view class="time_flex">
                  <view>{{ endList[index].list[0][0] }}</view>
                  <view>{{ endList[index].list[0][1] }}</view>
                  :
                  <view>{{ endList[index].list[1][0] }}</view>
                  <view>{{ endList[index].list[1][1] }}</view>
                  :
                  <view>{{ endList[index].list[2][0] }}</view>
                  <view>{{ endList[index].list[2][1] }}</view>
                </view>
              </view>
              <view class="time-info">已售{{ item.soldCount }}/还剩{{ item.inventory }}</view>
              <view class="user__icon">
                <view v-for="(attr, idx) in userAttrs[index]" :key="idx" :class="'icon_' + (idx + 1)">
                  <image :src="attr" mode="aspectFit" v-if="attr"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>
</template>

<script module="image" lang="wxs" src="@/wxs/image.wxs"></script>

<script lang='ts'>
  import {
    Component,
    Vue,
    Prop,
    Watch
  } from 'vue-property-decorator'
  import {
    getGoodsList,
  } from "@/api/modules/goods";

  let TIMER: number
  @Component({})
  export default class TopBiggoods extends Vue {
    @Prop() propData: any
    formData:any={}
    GoodsNameClass: string = "" // 商品名称文本样式
    GoodsBoxClass: string = "" // 商品边框样式
    BigGoodsPageClass: string = ""
    goodsList: Array < any >= [] // 商品列表
    endList: Array < any >= [] // 结束时间倒计时
    userAttrs: Array < any >= [] // 用户头像
    searchForm: any = {
      // 获取商品时搜索对象
      current: 1,
      name: "",
      showCategoryId: "",
      size: 10,
    }
    hasMore: boolean = true // 是否还有更多

    isFirst: boolean = true

    @Watch("propData",{deep:true})
    getFormData() {
      if (TIMER) {
        clearInterval(TIMER);
      }
      if (this.propData) {
        this.formData = this.propData
        const showCategoryId =
          this.formData.currentFirstCategory && !this.isFirst ?
          this.formData.currentFirstCategory.category.id :
          "";
        this.setData({
            searchForm: {
              current: 1,
              name: "",
              showCategoryId,
              size: 10,
            },
            hasMore: true,
            goodsList: [],
            endList: [],
            userAttrs: [],
          },
          () => {
            this.isFirst = false;
            this.getInfo();
          },
        );
      }
    }

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      this.getFormData()
    }

    /**
     * 加载数据
     */
    getInfo() {
      this.getAllList();
      this.getGoodsNameClass();
      this.getGoodsBoxClass();
      this.getBigGoodsPageClass();
    }

    onReachscrollBottom() {
      this.getInfo();
    }

    /**
     * 获取商品边框样式
     */
    getGoodsBoxClass() {
      // const { goodsStyle = 1, doodsAngle = 1 } = this.data.formData;
      const goodsStyle = 1;
      const doodsAngle = 2;
      // 商品样式 1无底白边 2卡片投影 3描边白底
      const gstyles = [
        "spellpre__goods--boxWB",
        "spellpre__goods--boxCP",
        "spellpre__goods--boxSW",
      ];
      // 图片倒角 1直角 2圆角
      const astyles = ["spellpre__goods--corners", "spellpre__goods--angle"];
      const gs = gstyles[+goodsStyle - 1];
      const as = astyles[+doodsAngle - 1];
      this.setData({
        GoodsBoxClass: `${gs} ${as}`,
      });
    }

    /**
     * 获取商品名称文本样式
     */
    getGoodsNameClass() {
      const {
        textStyle = 1
      } = this.formData;
      // 1常规体 2加粗体
      const styles = ["spellpre__goods--nameF", "spellpre__goods--nameB"];
      this.setData({
        GoodsNameClass: styles[+textStyle - 1],
      });
    }

    /**
     * 设置商品class值
     */
    getBigGoodsPageClass() {
      // 1顶部模式 2侧边栏模式 1大图样式 2列表样式
      const {
        selectMode,
        listStyle
      } = this.formData;
      const list = [];
      selectMode === 1 && list.push("page__goods-addPadding");
      selectMode === 2 && listStyle === 2 && list.push("left__Lgoods-style");
      this.setData({
        BigGoodsPageClass: `${list.join(" ")}`,
      });
    }

    /**
     * 获取商品
     */
    async getAllList() {
      if (!this.hasMore) return;
      const param = {
        saleMode: this.formData.saleMode,
      };
      const searchForm = {
        ...this.searchForm,
        ...param,
      };
      let list = [];
      let res: any = {};
      res = await getGoodsList(param, searchForm);
      list = res.list;
      // if (!this.data.searchForm.showCategoryId) {
      //   res = await getGoodsList(param, searchForm);
      //   list = res.list;
      // } else {
      //   res = await getEffectCategoryGoods(
      //     this.data.searchForm.showCategoryId,
      //     searchForm,
      //   );
      //   res.forEach(sd => {
      //     list.push(...sd.apiAliveProductVos);
      //   });
      // }
      const data: any = [];
      list.forEach(item => {
        item.hasTimeTips = item.goodTime && item.goodTime.includes(":");
        item.goodTime = item.hasTimeTips ?
          item.goodTime.substr(5) :
          item.goodTime;
        data.push({
          id: Number(item.id),
          name: item.name,
          img: this.returnGoodsImg(item),
          actPrice: item.minPrice,
          price: item.maxPrice,
          soldCount: item.sale,
          inventory: item.inventory,
          hasTimeTips: item.hasTimeTips,
        });
      });
      const formData = this.formData;
      if (formData.count > data.length) {
        formData.count = data.length;
      }
      this.setData({
          goodsList: this.goodsList.concat(data),
          formData,
        },
        () => {
          // if (this.data.searchForm.showCategoryId) return;
          this.dealSearchParam(res);
        },
      );
      // getGroupGoodsList(param, searchForm).then(res => {
      //   const list = res.list;
      //   const endList: any = [];
      //   const userAttrs: any = [];
      //   const data: any = [];
      //   list.forEach(item => {
      //     // 处理商品价格 已购和剩余量
      //     this.dealPrice(item);
      //     // 处理购买用户的头像
      //     userAttrs.push(this.dealUserAttr(item));
      //     const beginTime = new Date(
      //       this.formatTime(item.assembleActivity.activityBeginTime) ||
      //         Date.now(),
      //     ).getTime();
      //     const flag = Number(item.preheatStatus) === 1 && beginTime > Date.now();
      //     const tempTime = flag
      //       ? item.assembleActivity.activityBeginTime
      //       : item.assembleActivity.activityEndTime;
      //     // 处理倒计时
      //     endList.push(this.dealEndTime(tempTime));
      //     item.flag = flag;
      //     item.hasTimeTips = item.goodTime && item.goodTime.includes(":");
      //     item.goodTime = item.hasTimeTips
      //       ? item.goodTime.substr(5)
      //       : item.goodTime;
      //     // 推入商品数据
      //     this.pushData(data, item);
      //   });
      //   const formData = this.data.formData;
      //   if (formData.count > data.length) {
      //     formData.count = data.length;
      //   }
      //   this.setDataSmart(
      //     {
      //       goodsList: this.data.goodsList.concat(data),
      //       formData,
      //       endList: this.data.endList.concat(endList),
      //       userAttrs: this.data.userAttrs.concat(userAttrs),
      //     },
      //     () => {
      //       this.intervalTime();
      //       this.dealSearchParam(res);
      //       console.log("这里是获取到的商品数据", data);
      //     },
      //   );
      // });
    }

    /**
     * 处理请求参数
     */
    dealSearchParam(res) {
      const hasMore = this.goodsList.length < res.total;
      const searchForm = this.searchForm;
      if (hasMore) {
        searchForm.current += 1;
      }
      this.setData({
        hasMore,
        searchForm,
      });
    }

    /**
     * 处理商品价格 已购和剩余量
     */
    dealPrice(item) {
      if (item.skuStocks.list === 1) {
        item.price = item.price.toFixed(2);
        item.actPrice = item.originalPrice.toFixed(2);
      } else {
        const priceList = item.skuStocks.map(item => item.originalPrice);
        item.price = Math.min(...priceList).toFixed(2);
        const actPriceList = item.skuStocks.map(item => item.price);
        item.actPrice = Math.min(...actPriceList).toFixed(2);
        item.leadPrice = Math.max(...actPriceList).toFixed(2);
      }
      item.soldCount = item.sale;
      item.inventory = 0;
      item.skuStocks.forEach(i => {
        i.price = i.price.toFixed(2);
        item.soldCount = item.soldCount + i.sale;
        item.inventory = item.inventory + i.stock;
      });
    }

    /**
     * 处理购买商品的用户头像
     */
    dealUserAttr(item) {
      let userAttrs: any = [];
      if (item.buyerVo && item.buyerVo.buyerList) {
        userAttrs = item.buyerVo.buyerList.map(i => {
          return i.avatar_url;
        });
      }
      return userAttrs.splice(0, 3);
    }

    /**
     * 处理倒计时时间
     */
    dealEndTime(time) {
      time = this.formatTime(time);
      const d1 = new Date(time).getTime();
      const d2 = Date.now();
      const t = d1 - d2;
      let h: any = parseInt(`${t / 3600000}`, 10);
      let s: any = parseInt(`${(t % 3600000) / 60000}`, 10);
      let m: any = parseInt(`${((t % 3600000) % 60000) / 1000}`, 10);
      h = h > 9 ? h : "0" + h;
      s = s > 9 ? s : "0" + s;
      m = m > 9 ? m : "0" + m;
      return {
        time: d1,
        list: [`${h}`, `${s}`, `${m}`],
      };
    }

    /**
     * 处理商品图片
     */
    returnGoodsImg(item) {
      const {
        widePic,
        pic
      } = item;
      let url = pic;
      if (this.formData.listStyle === 1) {
        url = widePic ? widePic.split(",")[0] : pic;
      }
      return url;
    }

    /**
     * 推入数据
     */
    pushData(data, item) {
      data.push({
        id: Number(item.id),
        name: item.name,
        img: this.returnGoodsImg(item),
        endTime: item.assembleActivity.activityEndTime,
        beginTime: item.assembleActivity.activityBeginTime,
        actPrice: item.actPrice,
        price: item.price,
        leadPrice: item.leadPrice,
        soldCount: item.soldCount,
        inventory: item.inventory,
        status: item.flag ? 1 : 2,
        preheatStatus: Number(item.preheatStatus),
        hasTimeTips: item.hasTimeTips,
      });
    }

    /**
     * 定时器处理倒计时
     */
    intervalTime() {
      if (TIMER) {
        clearInterval(TIMER);
      }
      TIMER = setInterval(() => {
        const endList: any = [];
        this.endList.forEach((i: any) => {
          endList.push(this.dealEndTime(i.time));
        });
        this.setData({
          endList,
        });
      }, 1000);
    }

    /**
     * 进入商品详情
     */
    gotoDetail(e) {
      const goodId = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: `/subcontract/pages/detail/detail?id=${goodId}`,
      });
    }

    /**
     * 格式化时间
     */
    formatTime(time) {
      while (("" + time).indexOf("-") !== -1) {
        time = ("" + time).replace("-", "/");
      }
      return time;
    }
    // 组件周期函数--监听组件销毁之前
    beforeDestroy() {
      if (TIMER) {
        clearInterval(TIMER);
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 分类页
  .top__biggoods-page {
    .spellpre__goods--box {
      padding: 0px;
    }

    @include b(spellpage) {
      .el-radio {
        margin-right: 20px;
      }

      @include e(addmart) {
        margin-top: 7px;
      }
    }

    @include b(spellpre) {
      box-sizing: border-box;
      background-color: #f8f8f8;
      position: relative;

      @include e(header) {
        color: #333;
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;

        @include m(title) {
          font-size: 18px;
          font-weight: 700;
        }

        @include m(more) {
          font-size: 14px;
          font-weight: 400;
          float: right;
        }
      }

      @include e(headtemp) {
        height: 50px;
        line-height: 50px;
        width: 100%;
      }

      @include e(goods) {
        box-sizing: border-box;

        .spellpre__goods--box {
          position: relative;
          background-color: #fff;
          overflow: hidden;
        }

        @include m(boxCP) {
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }

        @include m(boxSW) {
          border: 1px solid #f8f8f8;
        }

        @include m(angle) {
          border-radius: 7px;
        }

        @include m(corners) {
          border-radius: 0;
        }

        @include m(nameF) {
          font-weight: 400;
        }

        @include m(nameB) {
          font-weight: 600;
        }

        .no__goods {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -88rpx;
          margin-top: -88rpx;
          z-index: 11;
          width: 176rpx;
          height: 176rpx;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          flex-direction: column;

          text {
            display: block;
            width: 176rpx;
            text-align: center;
            font-size: 25rpx;
          }
        }

        @include m(cart1) {
          float: right;
          height: 28px;
          width: 28px;
          background-color: rgba(252, 98, 63, 1);
          box-sizing: border-box;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 5px;

          image {
            display: inline-block;
            width: 19px;
            height: 19px;
          }
        }

        @include m(cart) {
          float: right;
          height: 28px;
          width: 28px;
          box-sizing: border-box;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 5px;
        }

        @include m(cart1) {
          background-color: #fff;

          image {
            display: inline-block;
            width: 30px;
            height: 30px;
          }
        }

        @include m(cart2) {
          background: linear-gradient(164deg, rgba(243, 243, 243, 1), rgba(229, 56, 46, 1), rgba(253, 78, 38, 1));
          box-shadow: 0px 2px 7px 0px rgba(255, 14, 0, 0.27);
          border-radius: 50%;

          image {
            display: inline-block;
            width: 20px;
            height: 20px;
          }
        }

        @include m(cart3) {
          border: 1px solid rgba(252, 98, 63, 1);
          width: 80px;
          color: rgba(252, 98, 63, 1);
          font-size: 14px;
          border-radius: 20px;
          height: 30px;
          line-height: 30px;
        }

        @include m(cart4) {
          border: 1px solid rgba(252, 98, 63, 1);
          background-color: rgba(252, 98, 63, 1);
          width: 80px;
          color: #fff;
          font-size: 14px;
          border-radius: 20px;
          height: 30px;
          line-height: 30px;
        }

        @include m(coner) {
          position: absolute;

          image,
          text {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
          }
        }

        @include m(coner1) {
          left: -2px;
          top: 10px;
          width: 52px;
          height: 24px;
        }

        @include m(coner2) {
          left: 10px;
          top: 0px;
          width: 48px;
          height: 26px;

          text {
            color: white;
            font-size: 12px;
            text-align: center;
            line-height: 24px;
          }
        }

        @include m(coner3) {
          left: 0;
          top: 0;
          width: 48px;
          height: 40px;
        }

        @include m(delivery) {
          view {
            color: #FA6454;
            font-size: 12px;
            font-weight: 400;
            display: inline-block;
            background-color: rgba(250, 91, 74, .2);
            border-radius: 17px;
            padding: 2px 8px;
          }
        }

        @include m(footer) {
          .timebox {
            display: inline-block;
            height: 24px;
          }

          .tip {
            display: inline-block;
            height: 24px;
            line-height: 24px;
            color: #8B8B8B;
            font-size: 13px;
            margin-right: 4px;
            margin-top: 1px;
          }
        }

        .time_flex {
          width: 110px;
          height: 24px;
          display: inline-block;
          color: #2F2F2F;
          font-size: 9px;
          vertical-align: inherit;

          view {
            font-size: 13px;
            display: inline-block;
            width: 12px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            color: #fff;
            background-color: #2F2F2F;
            border-radius: 3px;
            margin: 0px 1px;
            vertical-align: text-bottom;
          }
        }

        .time-info {
          float: right;
          height: 24px;
          line-height: 24px;
          color: #A3A3A3;
          font-size: 13px;
          margin-left: 8px;
        }

        .user__icon {
          float: right;
          height: 24px;
          width: 60px;
          position: relative;
          margin-top: 1px;

          view {
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 1);
            background-color: #D1D1D1;
            top: 0;
            position: absolute;

            image {
              width: 24px;
              height: 24px;
              border-radius: 50%;
            }
          }

          .icon_1 {
            right: 0;
            z-index: 1;
          }

          .icon_2 {
            right: 12px;
            z-index: 2;
          }

          .icon_3 {
            right: 24px;
            z-index: 3;
          }
        }
      }

      @include e(goodsL) {
        box-sizing: border-box;

        .spellpre__goods--box {
          box-sizing: border-box;
          padding: 10px;
        }

        @include m(content) {
          display: flex;
        }

        @include m(box) {
          display: flex;
          box-sizing: border-box;
          overflow: hidden;
          position: relative;
        }

        @include m(icon) {
          width: 138px;
          height: 138px;
          position: relative;

          .ipic {
            display: inline-block;
            width: 138px;
            height: 138px;
            overflow: hidden;
            border-radius: 3px;

            image {
              min-height: 138rpx;
              width: 100%;
            }
          }
        }

        .spellpre__goods--cart {
          margin-top: 12px;
        }

        .spellpre__goods--coner1 {
          left: 10px;
          top: 20px;
        }

        .spellpre__goods--coner2 {
          left: 10px;
          top: 10px;
        }

        .spellpre__goods--coner3 {
          left: 10px;
          top: 10px;
        }

        @include m(info) {
          flex: 1;
          box-sizing: border-box;
          margin-left: 10px;
          position: relative;
        }

        @include m(name) {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 15px;
          line-height: 20px;
          color: #0E0E0E;
          box-sizing: border-box;
          padding: 8px 0;
          max-height: 48px;
        }

        @include m(buy) {
          width: 100%;
          height: 65px;
          position: absolute;
          bottom: 0;
          left: 0;
          box-sizing: border-box;
          padding-top: 20px;
        }

        @include m(prinum) {
          display: inline-block;
          font-size: 22px;
          font-weight: 400;
          color: #EC342C;
          font-weight: 600;
        }

        @include m(guaid) {
          font-size: 14px;
          color: #AAAAAA;
          text-decoration: line-through;
        }

        @include m(footer) {
          margin-top: 12px;
          height: 20px;
          line-height: 20px;
          position: relative;
          box-sizing: border-box;

          .tip {
            vertical-align: middle;
          }
        }
      }

      @include e(goodsB) {
        box-sizing: border-box;

        @include m(box) {
          box-sizing: border-box;
          overflow: hidden;
          position: relative;
        }

        @include m(icon) {
          width: 100%;
          position: relative;

          image {
            width: 100%;
            height: 175px;
          }
        }

        .spellpre__goods--delivery {
          padding-top: 0px;
        }

        .detail__box {
          box-sizing: border-box;
          padding: 0 8px;
        }

        @include m(name) {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 15px;
          line-height: 31px;
          height: 31px;
          color: #0E0E0E;
        }

        @include m(buy) {
          width: 100%;
          height: 40px;
          line-height: 40px;
          box-sizing: border-box;
        }

        @include m(prinum) {
          display: inline-block;
          font-size: 22px;
          font-weight: 500;
          color: #EC342C;
          height: 40px;
          line-height: 40px;
          font-weight: 600;
        }

        @include m(guaid) {
          font-size: 14px;
          color: #AAAAAA;
          display: inline-block;
          margin-left: 5px;
          height: 40px;
          line-height: 40px;
          text-decoration: line-through;
        }

        @include m(info) {
          box-sizing: border-box;
          height: 35px;
          position: relative;
        }
      }
    }
  }

  .page__goods-addPadding {
    padding: 0px 10px;
    height: calc(100% - 55px);
    overflow-y: scroll;
    box-sizing: border-box;
  }

  .top__biggoods-page.left__Lgoods-style {

    .spellpre__goodsL--icon,
    .ipic {
      width: 90px;
      height: 90px;
    }

    .spellpre__goodsL--content {
      width: 100%;
      overflow-x: hidden;
    }

    .spellpre__goodsL--info {
      width: calc(100% - 100px);
    }

    .spellpre__goods--delivery {
      display: none;
    }

    .spellpre__goodsL--name {
      padding: 4px 0;
      max-height: 22px;
      white-space: nowrap;
    }
  }
</style>